<!-- 统计分析 - 数据目录 -->
<script>
import { defineComponent } from 'vue';
import GlobalCard from '@/components/GlobalCard/global-card.vue';
let MyChart = null;
let CountObj = {};
export default defineComponent({
  name: "SectionTwo",
  components: {
    GlobalCard,
  },
  setup() {
  },
  data() {
    return {
      data_1: 25,
      data_2: 12,
      data_3: 7,
      activeId: 'length',
      listData: [{
        name: '长度',
        id: 'length'
      }, {
        name: '健康度',
        id: 'health'
      }]
    }
  },
  mounted() {
    setTimeout(() => {
      this.setSelect(this.activeId);
    }, 30)
  },
  watch: {
  },
  computed: {
  },
  beforeRouteLeave() { },
  methods: {
    initLength() {
      MyChart = echarts.init(document.getElementById('Gongreguanxiantongji'));
      var category = [{
        name: "暖域",
        value: 100,
      },
      {
        name: "新阳",
        value: 200
      },
      {
        name: "幸福源",
        value: 300
      },
      {
        name: "兆源",
        value: 400
      },
      {
        name: "开源",
        value: 50
      },
      {
        name: "龙发",
        value: 120
      },
      {
        name: "海能达",
        value: 100
      },
      {
        name: "家盛",
        value: 85
      },
      {
        name: "金洲",
        value: 100
      },
      {
        name: "上合",
        value: 70
      }
      ]; // 类别
      // var total = 0; // 数据总数
      var total = Math.max(...category.map(v => {
        return v.value
      }))
      var datas = [];
      category.forEach(value => {
        value.label = {
          fontFamily: 'alimamashuheiti',
          fontSize: '14'
        }
        // total = total + value.value;
        datas.push(value.value);
      });
      const option = {
        // backgroundColor: '#071347',
        xAxis: {
          max: total,
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        grid: {
          left: 80,
          top: 20, // 设置条形图的边距
          right: 100,
          bottom: 20
        },
        yAxis: [{
          type: "category",
          inverse: false,
          data: category,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          }
        }],
        series: [{
          // 内
          type: "bar",
          barWidth: 14,
          legendHoverLink: false,
          silent: true,
          itemStyle: {
            normal: {
              color: function (params) {
                var color;
                if (params.dataIndex == 19) {
                  color = {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [{
                      offset: 0,
                      color: "#EB5118" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#F21F02" // 100% 处的颜色
                    }
                    ]
                  }
                } else if (params.dataIndex == 18) {
                  color = {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [{
                      offset: 0,
                      color: "#FFA048" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#B25E14" // 100% 处的颜色
                    }
                    ]
                  }
                } else if (params.dataIndex == 17) {
                  color = {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [{
                      offset: 0,
                      color: "#F8E972" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#E5C206" // 100% 处的颜色
                    }
                    ]
                  }
                } else {
                  color = {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [{
                      offset: 0,
                      color: "#1588D1" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#0F4071" // 100% 处的颜色
                    }
                    ]
                  }
                }
                return color;
              },
            }
          },
          label: {
            normal: {
              show: true,
              position: "left",
              formatter: "{b}",
              textStyle: {
                color: "#fff",
                fontSize: 14
              }
            }
          },
          data: category,
          z: 1,
          animationEasing: "elasticOut"
        },
        {
          // 分隔
          type: "pictorialBar",
          itemStyle: {
            normal: {
              color: "#061348"
            }
          },
          symbolRepeat: "fixed",
          symbolMargin: 6,
          symbol: "rect",
          symbolClip: true,
          symbolSize: [1, 16],
          symbolPosition: "start",
          symbolOffset: [1, -2],
          symbolBoundingData: this.total,
          data: category,
          z: 2,
          animationEasing: "elasticOut"
        },
        {
          // 外边框
          type: "pictorialBar",
          symbol: "rect",
          symbolBoundingData: total,
          itemStyle: {
            normal: {
              color: "none"
            }
          },
          label: {
            position: 'right',
            distance: 20,
            fontFamily: 'alimamashuheiti',
            color: '#fff',
            fontSize: '18',
            show: true
          },
          data: datas,
          z: 0,
          animationEasing: "elasticOut"
        },
        {
          name: "外框",
          type: "bar",
          barGap: "-120%", // 设置外框粗细
          data: [total, total, total, total, total, total, total, total, total, total],
          barWidth: 20,
          itemStyle: {
            normal: {
              color: "transparent", // 填充色
              barBorderColor: "#1C4B8E", // 边框色
              barBorderWidth: 1, // 边框宽度
              // barBorderRadius: 0, //圆角半径
              label: {
                // 标签显示位置
                show: false,
                position: "top" // insideTop 或者横向的 insideLeft
              }
            }
          },
          z: 0
        }
        ]
      };
      MyChart.setOption(option);
    },
    initHealth() {
      MyChart = echarts.init(document.getElementById('Gongreguanxiantongji'));
      let color = ['#999999', '#2F8DF4', '#34ff67', '#3445fe', '#ff4567']

      let option = {
        color: color,
        title: {
          left: 'center',
          top: '50%',
          textStyle: {
            fontSize: 16,
            color: '#fff',
            fontWeight: 'normal'
          }
        },
        tooltip: {
          trigger: 'item',
          textStyle: {
            fontFamily: 'ALIBABAPUHUI-REGU'
          }
        },
        legend: {
          left: 20,
          top: 10,
          itemWidth: 13,
          itemHeight: 8,
          borderRadius: 0,
          icon: 'rect',
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 1,
          },
          textStyle: {
            color: '#fff',
            fontSize: '14',
            fontFamily: 'ALIBABAPUHUI-REGU'
          }
        },
        series: [{
          type: 'pie',
          roseType: 'radius',
          radius: ['35%', '60%'],
          data: [{
            value: 1122,
            name: '0-5年',
            rv: [0, 5]
          }, {
            value: 809,
            name: '5-10年',
            rv: [5, 10]
          },
          {
            value: 1412,
            name: '10-30年',
            rv: [10, 30]
          }, {
            value: 123,
            name: '30-50年',
            rv: [30, 50]
          },
          {
            value: 209,
            name: '50年及以上',
            rv: [50, 500]
          }
          ],
          label: {
            normal: {
              formatter: '{font|{c}}\n{hr|}\n{font|{d}%}',
              rich: {
                font: {
                  fontSize: 12,
                  padding: [5, 0],
                  color: '#fff'
                },
                hr: {
                  height: 0,
                  borderWidth: 1,
                  width: '100%',
                  borderColor: '#fff'
                }
              }
            },
          },
          labelLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          emphasis: {
            itemStyle: {
              borderColor: '#fff', // 边框颜色
              borderWidth: 2,        // 边框宽度
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0,0,0,0.5)'
            }
          }
        }],
        graphic: [
          {
            type: 'text',
            left: 'center',
            bottom: '40%',
            style: {
              fontFamily: 'alimamashuheiti',
              text: '总计', // 要显示的数字
              textAlign: 'center',
              fill: '#fff', // 文字颜色
              fontSize: 16,
              lineHeight: 20,
            }
          },
          {
            type: 'text',
            left: 'center',
            bottom: '50%',
            style: {
              fontFamily: 'alimamashuheiti',
              text: '3675', // 要显示的数字
              textAlign: 'center',
              fill: '#fff', // 文字颜色
              fontSize: 30,
              lineHeight: 20,
            }
          }
        ]
      };
      MyChart.setOption(option);
      MyChart.on('click', (params) => {
        const rv = params.data.rv;
        const name = params.name;
        if (!CountObj[name]) {
          CountObj[name] = 1
        } else {
          CountObj[name]++
        }

        this.$MITT_BUS.emit('send-pipline-realdata', {
          data: rv,
          count: CountObj[name],
          color: params.color
        })

        let dataIndex = params.dataIndex;
        // 更新被点击部分的边框样式
        option.series[0].data.forEach(function (dataItem, index) {
          dataItem.itemStyle = {
            borderColor: '#fff',
            borderWidth: 0
          };
          if (!(CountObj[name] % 2)) {
          } else if (dataItem.name === name) {
            dataItem.itemStyle = {
              borderColor: '#fff',
              borderWidth: 2
            };
          }

        });
        MyChart.setOption(option);
      })

    },
    setSelect(e) {
      if (MyChart) {
        MyChart.dispose();
      }
      if (e === 'length') {
        this.initLength();
      } else {
        this.initHealth();
      }
    }
  }
});
</script>
<template>
  <div class="section-two">
    <GlobalCard :mainTitle="'管线统计'" :activeId="activeId" :showSelect="true" :listData="listData"
      @change="(e) => { setSelect(e) }">
      <template #body>
        <!-- 代码 -->
        <div id="Gongreguanxiantongji">

        </div>
      </template>
    </GlobalCard>
  </div>
</template>
<style scoped lang="less">
.section-two {
  position: fixed;
  top: 28rem;
  left: 2rem;
}

#Gongreguanxiantongji {
  width: 100%;
  height: 355px;
}
</style>